<template>
  <div id="reservation_record">
    <header>
      <i @click="goBack()"></i>
      <div>{{time}} 预约记录</div>
    </header>
    <div class="swipe">
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <ul class="list">
          <div class='mc' v-if="list.length<1">
            <img src="../../../image/no_record@2x.png" width='74' alt="">
            <p>目前还没有任何预约记录!</p>
          </div>
          <li v-for="(item,index) in list" :key='index'>
            <a>
              <ul>

                <li>
                  <span style="color: #b8b8b8;align-items: center">
                    <img src="../../../image/time.png" alt="" style="width: 26px;height: 25px;margin-right: 10px">
                    预约时间：{{item.time.substring('11')}}
                  </span>
                </li>
                <li class="user">
                  <span style="align-items: center">
                    <img src="../../../image/bj.png" alt="">{{item.name}}
                  </span>
                  <span style="align-items: center">
                    <img src="../../../image/bj.png" alt="">{{item.sex}}
                  </span>
                  <span style="align-items: center">
                    <img src="../../../image/bj.png" alt="">{{item.age}}
                  </span>

                </li>
                <li class="user"> <span style="align-items: center">
                    <img src="../../../image/bj.png" alt="">{{item.tele}}
                  </span></li>
                <li class='doctor'>
                  {{item.project}}
                </li>
                <li class='remarks'>
                  {{item.remarks}}
                </li>
              </ul>
            </a>
          </li>
        </ul>
      </Loadmore>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        list: [],
        doctorid: '', //医生id
        time: '', //当前时间
        sentPage: {
          page: 1,
          rows: "10"
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕


      }
    },
    components: {
      Loadmore,
    },
    filters: {
      getDay: function (val) { //返回星期几
        var d = new Date(val);
        var weekday = new Array(7)
        weekday[0] = "星期天"
        weekday[1] = "星期一"
        weekday[2] = "星期二"
        weekday[3] = "星期三"
        weekday[4] = "星期四"
        weekday[5] = "星期五"
        weekday[6] = "星期六"
        return weekday[d.getDay()]
      }
    },
    methods: {
      goBack() {
        this.$router.push({
          name: 'appointmentTime',
          query: {
            user: this.$route.query.user
          }
        });
      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push({
            name: 'login1'
          })
          return false;
        } else {
          return true;
        }
      },

      // 获取预约患者列表
      getList(params) {
        // 获取预约患者列表
        this.doctorid = localStorage.getItem("loginMobile");
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_appointment_patient/0?timeformat=" + this.time +
          "&doctorid=" +
          this.doctorid, params, r => {
            this.totalNum = r.data.records; //总数据
            if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }
            if (this.sentPage.page == 1) {
              this.list = r.data.rows;
            } else {
              this.list = this.list.concat(r.data.rows);
            }
            if (r.data.rows.length == 0 && this.sentPage.page > 1) {
              this.$utils._toast("暂无更多数据");
            }

          }, err => {
            console.log(err);
          })
      },
      //上拉加载下一页
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getList(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
    },
    created() {
      this.time = this.$route.query.time
      this.getList(this.sentPage);
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding-top: 115px;

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
      font-size: 17px;
      color: rgba(51, 51, 51, 1);
    }
  }

  .user {
    padding: 10px 0px !important;
    justify-content: start !important;
  }

  .user span {
    margin-right: 65px !important;
  }

  .user img {
    width: 9px;
    height: 9px;
    margin-right: 22px
  }

</style>
